<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灰鲸商城系统管理后台</title>
    <link rel="icon" href="../static/img/huijing_mall1.ico" type="image/x-icon">
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>

    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>

    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .sidebar-item {
                @apply flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-primary/10 hover:text-primary rounded-lg transition-all duration-200;
            }
            .sidebar-item.active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .card-shadow {
                @apply shadow-sm hover:shadow-md transition-shadow duration-300;
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-all duration-200;
            }
            .btn-outline {
                @apply border border-gray-300 px-4 py-2 rounded-lg hover:bg-gray-50 transition-all duration-200;
            }
            .btn-shop {
                @apply bg-secondary text-white px-4 py-2 rounded-lg hover:bg-secondary/90 transition-all duration-200;
            }
            .table-row-hover {
                @apply hover:bg-gray-50 transition-colors duration-150;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark antialiased">
<div class="flex h-screen overflow-hidden">
    <!-- 侧边栏导航 -->
    <aside id="sidebar" class="w-64 bg-white h-full shadow-sm transition-all duration-300 ease-in-out z-20">
        <!-- 系统Logo -->
        <div class="p-5 border-b flex items-center gap-3">
            <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
                <i class="fa fa-shopping-bag text-white text-xl"></i>
            </div>
            <h1 class="text-xl font-bold">灰鲸商城管理系统</h1>
        </div>

        <!-- 导航菜单 -->
        <nav class="p-4">
            <p class="text-xs uppercase text-gray-500 font-medium mb-2 px-4">主导航</p>
            <ul class="space-y-1">
                <li>
                    <a href="#dashboard" class="sidebar-item active" data-target="dashboard-view">
                        <i class="fa fa-tachometer w-5 text-center"></i>
                        <span>仪表盘</span>
                    </a>
                </li>
                <li>
                    <a href="#products" class="sidebar-item" data-target="products-view">
                        <i class="fa fa-cubes w-5 text-center"></i>
                        <span>商品管理</span>
                    </a>
                </li>
                <li>
                    <a href="#orders" class="sidebar-item" data-target="orders-view">
                        <i class="fa fa-shopping-cart w-5 text-center"></i>
                        <span>订单管理</span>
                    </a>
                </li>
                <li>
                    <a href="#users" class="sidebar-item" data-target="users-view">
                        <i class="fa fa-users w-5 text-center"></i>
                        <span>用户管理</span>
                    </a>
                </li>
                <li>
                    <a href="#categories" class="sidebar-item" data-target="categories-view">
                        <i class="fa fa-th-list w-5 text-center"></i>
                        <span>分类管理</span>
                    </a>
                </li>
            </ul>

            <p class="text-xs uppercase text-gray-500 font-medium mb-2 px-4 mt-6">系统设置</p>
            <ul class="space-y-1">
                <li>
                    <a href="#settings" class="sidebar-item" data-target="settings-view">
                        <i class="fa fa-cog w-5 text-center"></i>
                        <span>系统设置</span>
                    </a>
                </li>
                <li>
                    <a href="#logs" class="sidebar-item" data-target="logs-view">
                        <i class="fa fa-history w-5 text-center"></i>
                        <span>操作日志</span>
                    </a>
                </li>
            </ul>
        </nav>
    </aside>

    <!-- 主内容区域 -->
    <div class="flex-1 flex flex-col overflow-hidden">
        <!-- 顶部导航栏 -->
        <header class="h-16 bg-white border-b flex items-center justify-between px-6 shadow-sm z-10">
            <div class="flex items-center gap-4">
                <button id="toggle-sidebar" class="lg:hidden text-gray-500 hover:text-primary">
                    <i class="fa fa-bars text-xl"></i>
                </button>
                <div class="relative">
                    <input type="text" placeholder="搜索..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64">
                    <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                </div>
            </div>

            <div class="flex items-center gap-6">
                <!-- 前往采集按钮 -->
                <button id="goto-collect" class="btn-shop hidden md:flex items-center gap-2">
                    <i class="fa fa-external-link"></i>
                    <span>前往采集</span>
                </button>
                <!-- 前往商城按钮 -->
                <button id="goto-shop" class="btn-shop hidden md:flex items-center gap-2">
                    <i class="fa fa-external-link"></i>
                    <span>前往商城</span>
                </button>

                <!-- 通知按钮 -->
                <div class="relative">
                    <button class="text-gray-500 hover:text-primary relative">
                        <i class="fa fa-bell text-xl"></i>
                        <span class="absolute -top-1 -right-1 w-4 h-4 bg-danger rounded-full text-white text-xs flex items-center justify-center">3</span>
                    </button>
                </div>

                <!-- 用户信息 -->
                <div class="relative" id="user-menu-container">
                    <div class="flex items-center gap-3 cursor-pointer group" id="user-menu-trigger">
                        <img id="user-avatar" src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-9 h-9 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-colors">
                        <div class="hidden md:block">
                            <p id="user-name" class="text-sm font-medium">加载中...</p>
                            <p id="user-email" class="text-xs text-gray-500">加载中...</p>
                        </div>
                        <i class="fa fa-angle-down text-gray-500 group-hover:text-primary transition-colors"></i>
                    </div>

                    <!-- 下拉菜单 -->
                    <div id="user-dropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50 hidden">
                        <a href="#user-profile" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" id="personal-info-btn">
                            <i class="fa fa-user mr-2"></i>个人信息
                        </a>
                        <div class="border-t border-gray-100 my-1"></div>
                        <a href="#logout" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" id="logout-btn">
                            <i class="fa fa-sign-out mr-2"></i>退出登录
                        </a>
                    </div>
                </div>
            </div>
        </header>

        <!-- 页面内容 -->
        <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
            <!-- 仪表盘视图 -->
            <div id="dashboard-view" class="view-content">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold">仪表盘</h2>
                    <div class="flex gap-3">
                        <button class="btn-outline flex items-center gap-2">
                            <i class="fa fa-download"></i>
                            <span>导出报告</span>
                        </button>
                        <button class="btn-primary flex items-center gap-2">
                            <i class="fa fa-refresh"></i>
                            <span>刷新数据</span>
                        </button>
                    </div>
                </div>

                <!-- 数据概览卡片 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
                    <div class="bg-white rounded-xl p-6 card-shadow">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-500 text-sm">今日销售额</p>
                                <h3 class="text-2xl font-bold mt-1">¥24,568</h3>
                                <p class="text-success text-sm mt-2 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 12.5% <span class="text-gray-500 ml-1">较昨日</span>
                                </p>
                            </div>
                            <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                                <i class="fa fa-line-chart text-xl"></i>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl p-6 card-shadow">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-500 text-sm">今日订单</p>
                                <h3 class="text-2xl font-bold mt-1">1,248</h3>
                                <p class="text-success text-sm mt-2 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 8.2% <span class="text-gray-500 ml-1">较昨日</span>
                                </p>
                            </div>
                            <div class="w-12 h-12 rounded-full bg-success/10 flex items-center justify-center text-success">
                                <i class="fa fa-shopping-cart text-xl"></i>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl p-6 card-shadow">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-500 text-sm">活跃用户</p>
                                <h3 class="text-2xl font-bold mt-1">32,654</h3>
                                <p class="text-danger text-sm mt-2 flex items-center">
                                    <i class="fa fa-arrow-down mr-1"></i> 3.1% <span class="text-gray-500 ml-1">较昨日</span>
                                </p>
                            </div>
                            <div class="w-12 h-12 rounded-full bg-info/10 flex items-center justify-center text-info">
                                <i class="fa fa-users text-xl"></i>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl p-6 card-shadow">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-500 text-sm">商品总数</p>
                                <h3 class="text-2xl font-bold mt-1">8,452</h3>
                                <p class="text-success text-sm mt-2 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 5.3% <span class="text-gray-500 ml-1">较上周</span>
                                </p>
                            </div>
                            <div class="w-12 h-12 rounded-full bg-warning/10 flex items-center justify-center text-warning">
                                <i class="fa fa-cubes text-xl"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 图表和数据表格 -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
                    <div class="lg:col-span-2 bg-white rounded-xl p-6 card-shadow">
                        <div class="flex items-center justify-between mb-6">
                            <h3 class="font-bold text-lg">销售趋势</h3>
                            <div class="flex gap-2">
                                <button class="px-3 py-1 text-sm rounded-full bg-primary/10 text-primary">周</button>
                                <button class="px-3 py-1 text-sm rounded-full hover:bg-gray-100">月</button>
                                <button class="px-3 py-1 text-sm rounded-full hover:bg-gray-100">年</button>
                            </div>
                        </div>
                        <div class="h-80">
                            <canvas id="salesChart"></canvas>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl p-6 card-shadow">
                        <div class="flex items-center justify-between mb-6">
                            <h3 class="font-bold text-lg">订单状态分布</h3>
                            <button class="text-gray-400 hover:text-primary">
                                <i class="fa fa-ellipsis-v"></i>
                            </button>
                        </div>
                        <div class="h-80 flex items-center justify-center">
                            <canvas id="orderStatusChart"></canvas>
                        </div>
                    </div>
                </div>

                <!-- 最近订单 -->
                <div class="bg-white rounded-xl p-6 card-shadow">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="font-bold text-lg">最近订单</h3>
                        <a href="#orders" class="text-primary hover:underline flex items-center gap-1">
                            <span>查看全部</span>
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead>
                            <tr class="border-b">
                                <th class="text-left py-3 px-4 font-medium text-gray-500">订单编号</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-500">客户</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-500">金额</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-500">状态</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-500">时间</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-500">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="table-row-hover">
                                <td class="py-3 px-4">#ORD-85421</td>
                                <td class="py-3 px-4">
                                    <div class="flex items-center gap-2">
                                        <img src="https://picsum.photos/id/1027/32/32" alt="用户头像" class="w-7 h-7 rounded-full">
                                        <span>张三</span>
                                    </div>
                                </td>
                                <td class="py-3 px-4 font-medium">¥298.00</td>
                                <td class="py-3 px-4">
                                    <span class="px-2 py-1 rounded-full text-xs bg-success/10 text-success">已完成</span>
                                </td>
                                <td class="py-3 px-4 text-gray-500">2023-06-15 14:30</td>
                                <td class="py-3 px-4">
                                    <button class="text-primary hover:text-primary/80 mr-3">查看</button>
                                    <button class="text-gray-500 hover:text-gray-700">编辑</button>
                                </td>
                            </tr>
                            <tr class="table-row-hover">
                                <td class="py-3 px-4">#ORD-85420</td>
                                <td class="py-3 px-4">
                                    <div class="flex items-center gap-2">
                                        <img src="https://picsum.photos/id/1012/32/32" alt="用户头像" class="w-7 h-7 rounded-full">
                                        <span>李四</span>
                                    </div>
                                </td>
                                <td class="py-3 px-4 font-medium">¥1,599.00</td>
                                <td class="py-3 px-4">
                                    <span class="px-2 py-1 rounded-full text-xs bg-warning/10 text-warning">配送中</span>
                                </td>
                                <td class="py-3 px-4 text-gray-500">2023-06-15 13:45</td>
                                <td class="py-3 px-4">
                                    <button class="text-primary hover:text-primary/80 mr-3">查看</button>
                                    <button class="text-gray-500 hover:text-gray-700">编辑</button>
                                </td>
                            </tr>
                            <tr class="table-row-hover">
                                <td class="py-3 px-4">#ORD-85419</td>
                                <td class="py-3 px-4">
                                    <div class="flex items-center gap-2">
                                        <img src="https://picsum.photos/id/1000/32/32" alt="用户头像" class="w-7 h-7 rounded-full">
                                        <span>王五</span>
                                    </div>
                                </td>
                                <td class="py-3 px-4 font-medium">¥568.00</td>
                                <td class="py-3 px-4">
                                    <span class="px-2 py-1 rounded-full text-xs bg-info/10 text-info">已付款</span>
                                </td>
                                <td class="py-3 px-4 text-gray-500">2023-06-15 11:20</td>
                                <td class="py-3 px-4">
                                    <button class="text-primary hover:text-primary/80 mr-3">查看</button>
                                    <button class="text-gray-500 hover:text-gray-700">编辑</button>
                                </td>
                            </tr>
                            <tr class="table-row-hover">
                                <td class="py-3 px-4">#ORD-85418</td>
                                <td class="py-3 px-4">
                                    <div class="flex items-center gap-2">
                                        <img src="https://picsum.photos/id/1001/32/32" alt="用户头像" class="w-7 h-7 rounded-full">
                                        <span>赵六</span>
                                    </div>
                                </td>
                                <td class="py-3 px-4 font-medium">¥329.00</td>
                                <td class="py-3 px-4">
                                    <span class="px-2 py-1 rounded-full text-xs bg-danger/10 text-danger">已取消</span>
                                </td>
                                <td class="py-3 px-4 text-gray-500">2023-06-15 10:15</td>
                                <td class="py-3 px-4">
                                    <button class="text-primary hover:text-primary/80 mr-3">查看</button>
                                    <button class="text-gray-500 hover:text-gray-700">编辑</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 商品管理视图 -->
            <div id="products-view" class="view-content hidden">
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold">商品管理</h2>
                    <div class="flex flex-wrap gap-3">
                        <div class="relative">
                            <input type="text" placeholder="搜索商品..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-full md:w-64">
                            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                        </div>
                        <button class="btn-primary flex items-center gap-2">
                            <i class="fa fa-plus"></i>
                            <span>新增商品</span>
                        </button>
                    </div>
                </div>

                <!-- 商品列表 -->
                <div class="bg-white rounded-xl p-6 card-shadow mb-6">
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead>
                            <tr class="border-b">
                                <th class="text-left py-3 px-4 font-medium text-gray-500 w-10">
                                    <input type="checkbox" class="rounded text-primary focus:ring-primary">
                                </th>
                                <th class="text-left py-3 px-4 font-medium text-gray-500">商品图片</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-500">商品信息</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-500">分类</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-500">价格</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-500">库存</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-500">状态</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-500">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="table-row-hover">
                                <td class="py-3 px-4">
                                    <input type="checkbox" class="rounded text-primary focus:ring-primary">
                                </td>
                                <td class="py-3 px-4">
                                    <img src="https://picsum.photos/id/26/80/80" alt="商品图片" class="w-16 h-16 object-cover rounded">
                                </td>
                                <td class="py-3 px-4">
                                    <h4 class="font-medium">高级无线蓝牙耳机</h4>
                                    <p class="text-sm text-gray-500 mt-1">SKU: PRO-2023-001</p>
                                </td>
                                <td class="py-3 px-4">数码产品</td>
                                <td class="py-3 px-4 font-medium">¥299.00</td>
                                <td class="py-3 px-4">1,254</td>
                                <td class="py-3 px-4">
                                    <span class="px-2 py-1 rounded-full text-xs bg-success/10 text-success">在售</span>
                                </td>
                                <td class="py-3 px-4">
                                    <div class="flex gap-2">
                                        <button class="text-primary hover:text-primary/80" title="查看">
                                            <i class="fa fa-eye"></i>
                                        </button>
                                        <button class="text-gray-500 hover:text-gray-700" title="编辑">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        <button class="text-danger hover:text-danger/80" title="删除">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            <tr class="table-row-hover">
                                <td class="py-3 px-4">
                                    <input type="checkbox" class="rounded text-primary focus:ring-primary">
                                </td>
                                <td class="py-3 px-4">
                                    <img src="https://picsum.photos/id/96/80/80" alt="商品图片" class="w-16 h-16 object-cover rounded">
                                </td>
                                <td class="py-3 px-4">
                                    <h4 class="font-medium">智能手表 Pro</h4>
                                    <p class="text-sm text-gray-500 mt-1">SKU: WATCH-2023-005</p>
                                </td>
                                <td class="py-3 px-4">智能设备</td>
                                <td class="py-3 px-4 font-medium">¥899.00</td>
                                <td class="py-3 px-4">568</td>
                                <td class="py-3 px-4">
                                    <span class="px-2 py-1 rounded-full text-xs bg-success/10 text-success">在售</span>
                                </td>
                                <td class="py-3 px-4">
                                    <div class="flex gap-2">
                                        <button class="text-primary hover:text-primary/80" title="查看">
                                            <i class="fa fa-eye"></i>
                                        </button>
                                        <button class="text-gray-500 hover:text-gray-700" title="编辑">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        <button class="text-danger hover:text-danger/80" title="删除">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            <tr class="table-row-hover">
                                <td class="py-3 px-4">
                                    <input type="checkbox" class="rounded text-primary focus:ring-primary">
                                </td>
                                <td class="py-3 px-4">
                                    <img src="https://picsum.photos/id/20/80/80" alt="商品图片" class="w-16 h-16 object-cover rounded">
                                </td>
                                <td class="py-3 px-4">
                                    <h4 class="font-medium">男士纯棉T恤</h4>
                                    <p class="text-sm text-gray-500 mt-1">SKU: CLOTH-2023-102</p>
                                </td>
                                <td class="py-3 px-4">服装鞋帽</td>
                                <td class="py-3 px-4 font-medium">¥89.00</td>
                                <td class="py-3 px-4">2,456</td>
                                <td class="py-3 px-4">
                                    <span class="px-2 py-1 rounded-full text-xs bg-success/10 text-success">在售</span>
                                </td>
                                <td class="py-3 px-4">
                                    <div class="flex gap-2">
                                        <button class="text-primary hover:text-primary/80" title="查看">
                                            <i class="fa fa-eye"></i>
                                        </button>
                                        <button class="text-gray-500 hover:text-gray-700" title="编辑">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        <button class="text-danger hover:text-danger/80" title="删除">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            <tr class="table-row-hover">
                                <td class="py-3 px-4">
                                    <input type="checkbox" class="rounded text-primary focus:ring-primary">
                                </td>
                                <td class="py-3 px-4">
                                    <img src="https://picsum.photos/id/119/80/80" alt="商品图片" class="w-16 h-16 object-cover rounded">
                                </td>
                                <td class="py-3 px-4">
                                    <h4 class="font-medium">复古机械键盘</h4>
                                    <p class="text-sm text-gray-500 mt-1">SKU: COMP-2023-056</p>
                                </td>
                                <td class="py-3 px-4">电脑配件</td>
                                <td class="py-3 px-4 font-medium">¥399.00</td>
                                <td class="py-3 px-4">0</td>
                                <td class="py-3 px-4">
                                    <span class="px-2 py-1 rounded-full text-xs bg-gray-200 text-gray-500">缺货</span>
                                </td>
                                <td class="py-3 px-4">
                                    <div class="flex gap-2">
                                        <button class="text-primary hover:text-primary/80" title="查看">
                                            <i class="fa fa-eye"></i>
                                        </button>
                                        <button class="text-gray-500 hover:text-gray-700" title="编辑">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        <button class="text-danger hover:text-danger/80" title="删除">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <div class="flex items-center justify-between mt-6">
                        <p class="text-sm text-gray-500">显示 1 到 4 条，共 125 条</p>
                        <div class="flex items-center gap-1">
                            <button class="w-9 h-9 flex items-center justify-center rounded border border-gray-200 text-gray-400 hover:border-primary hover:text-primary disabled:opacity-50" disabled>
                                <i class="fa fa-angle-left"></i>
                            </button>
                            <button class="w-9 h-9 flex items-center justify-center rounded bg-primary text-white">1</button>
                            <button class="w-9 h-9 flex items-center justify-center rounded border border-gray-200 hover:border-primary hover:text-primary">2</button>
                            <button class="w-9 h-9 flex items-center justify-center rounded border border-gray-200 hover:border-primary hover:text-primary">3</button>
                            <button class="w-9 h-9 flex items-center justify-center rounded border border-gray-200 hover:border-primary hover:text-primary">...</button>
                            <button class="w-9 h-9 flex items-center justify-center rounded border border-gray-200 hover:border-primary hover:text-primary">32</button>
                            <button class="w-9 h-9 flex items-center justify-center rounded border border-gray-200 hover:border-primary hover:text-primary">
                                <i class="fa fa-angle-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 其他视图内容 (订单管理、用户管理等) -->
            <div id="orders-view" class="view-content hidden">
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold">订单管理</h2>
                    <div class="flex flex-wrap gap-3">
                        <div class="relative">
                            <input type="text" placeholder="搜索订单号..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-full md:w-64">
                            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                        </div>
                        <button class="btn-outline flex items-center gap-2">
                            <i class="fa fa-filter"></i>
                            <span>筛选</span>
                        </button>
                    </div>
                </div>

                <!-- 订单管理内容占位 -->
                <div class="bg-white rounded-xl p-6 card-shadow h-96 flex items-center justify-center">
                    <div class="text-center">
                        <i class="fa fa-shopping-cart text-5xl text-gray-300 mb-4"></i>
                        <p class="text-gray-500">订单管理功能内容将在这里显示</p>
                    </div>
                </div>
            </div>

            <div id="users-view" class="view-content hidden">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold mb-6">用户管理</h2>
                <!-- 用户管理内容占位 -->
                <div class="bg-white rounded-xl p-6 card-shadow h-96 flex items-center justify-center">
                    <div class="text-center">
                        <i class="fa fa-users text-5xl text-gray-300 mb-4"></i>
                        <p class="text-gray-500">用户管理功能内容将在这里显示</p>
                    </div>
                </div>
            </div>

            <div id="categories-view" class="view-content hidden">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold mb-6">分类管理</h2>
                <!-- 分类管理内容占位 -->
                <div class="bg-white rounded-xl p-6 card-shadow h-96 flex items-center justify-center">
                    <div class="text-center">
                        <i class="fa fa-th-list text-5xl text-gray-300 mb-4"></i>
                        <p class="text-gray-500">分类管理功能内容将在这里显示</p>
                    </div>
                </div>
            </div>

            <div id="settings-view" class="view-content hidden">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold mb-6">系统设置</h2>
                <!-- 系统设置内容占位 -->
                <div class="bg-white rounded-xl p-6 card-shadow h-96 flex items-center justify-center">
                    <div class="text-center">
                        <i class="fa fa-cog text-5xl text-gray-300 mb-4"></i>
                        <p class="text-gray-500">系统设置功能内容将在这里显示</p>
                    </div>
                </div>
            </div>

            <div id="logs-view" class="view-content hidden">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold mb-6">操作日志</h2>
                <!-- 操作日志内容占位 -->
                <div class="bg-white rounded-xl p-6 card-shadow h-96 flex items-center justify-center">
                    <div class="text-center">
                        <i class="fa fa-history text-5xl text-gray-300 mb-4"></i>
                        <p class="text-gray-500">操作日志功能内容将在这里显示</p>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>

<!-- 模态框示例 (新增/编辑商品) -->
<div id="product-modal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center p-4">
    <div class="bg-white rounded-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
        <div class="p-6 border-b flex items-center justify-between">
            <h3 class="text-xl font-bold">新增商品</h3>
            <button id="close-modal" class="text-gray-500 hover:text-gray-700">
                <i class="fa fa-times text-xl"></i>
            </button>
        </div>
        <div class="p-6">
            <!-- 表单内容将在这里 -->
            <p class="text-gray-500">商品表单内容将在这里显示</p>
        </div>
        <div class="p-6 border-t flex items-center justify-end gap-3">
            <button class="btn-outline" id="cancel-modal">取消</button>
            <button class="btn-primary">保存</button>
        </div>
    </div>
</div>

<script src="../static/js/system_mall_api.js"></script>
<script>
    tailwind.config = {
        theme: {
            extend: {
                colors: {
                    primary: '#165DFF',
                    secondary: '#36CFC9',
                    success: '#52C41A',
                    warning: '#FAAD14',
                    danger: '#FF4D4F',
                    info: '#1890FF',
                    dark: '#1D2129',
                    'gray-light': '#F2F3F5',
                    'gray-medium': '#C9CDD4'
                },
                fontFamily: {
                    inter: ['Inter', 'system-ui', 'sans-serif'],
                },
            },
        }
    }
</script>
</body>
</html>
